<!--
    Document    : index
    Created on  : 10-04-2014, 16:23:16
    Author      : Mr. Truong Khuong
    Phone       : 0985 747 240
    Email       : Khuongxuantruong@gmail.com
    Skype       : Khuongxuantruong
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../moodycrab/moodycrab.css" rel="stylesheet">
        <script src="../js/jquery-1.9.1.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
            <div class="container">
                <div class="navbar-header visible-xs">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar line-1"></span>
                        <span class="icon-bar line-2"></span>
                        <span class="icon-bar line-3"></span>
                    </button>
                    <a href="/home" class="navbar-brand">
                        <img src="images/logo.jpg"/>
                    </a>
                </div>
                <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation" >
                    <ul class="nav navbar-nav">

                        <li class=""><a href='index.html'>HOME</a></li>
                        <li class=""><a href='work.html'>WORK</a></li>
                    </ul>

                    <a href="/home">
                        <img class="logo hidden-xs" src="images/logo.jpg"/>
                    </a>
                    <ul class="nav navbar-nav navbar-right">
                        <li class=""><a href='about.html'>ABOUT</a></li>
                        <li class="active"><a href='contact.html'>CONTACT</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div  class="container" style="position: relative;z-index: 1">
            <div class="slogan">
                LET’S DISCUSS
            </div>
            <p class="notice">We are a floating agency, which means we can come to you or we can take you out to one of our favourite places listed below on the map.Project Planner</p>
            <div class="five-cols">
                <div style="border-bottom: 1px solid #ccc;padding-top:20px;padding-bottom:20px">
                    
                    <div class="col-md-3 col-xs-6 nav-item">
                        <div class="">
                            <a href="project-planner.html">
                            <div class="nailthumb">
                                <div class="nailthumb-figure square">
                                    <div class="nailthumb-container">
                                        <img class="nailthumb-image" src="images/pro_gray.jpg" >
                                    </div>
                                </div>
                            </div>
                            <h3>PROJECT PLANNER</h3>
                            <h4>LAUNCH IT</h4>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-6 nav-item">
                        <div class="">
                            <a href="about.html">
                            <div class="nailthumb">
                                <div class="nailthumb-figure square">
                                    <div class="nailthumb-container">
                                        <img class="nailthumb-image" src="images/phone_gray.jpg" >
                                    </div>
                                </div>
                            </div>
                            <h3>PHONE</h3>
                            <h4>61+ 422 925 979</h4>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-6 nav-item">
                        <div class="">
                            <a href="about.html">
                            <div class="nailthumb">
                                <div class="nailthumb-figure square">
                                    <div class="nailthumb-container">
                                        <img class="nailthumb-image" src="images/mail_gray.jpg" >
                                    </div>
                                </div>
                            </div>
                            <h3>MAIL</h3>
                            <h4>Andrew@moodycrab.com.au</h4>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-6 nav-item">
                        <div class="">
                            <a href="about.html">
                            <div class="nailthumb">
                                <div class="nailthumb-figure square">
                                    <div class="nailthumb-container">
                                        <img class="nailthumb-image" src="images/skype.jpg" >
                                    </div>
                                </div>
                            </div>
                            <h3>TWITTER</h3>
                            <h4>FOLLOW US</h4>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-6 nav-item">
                        <div class="">
                            <a href="about.html">
                            <div class="nailthumb">
                                <div class="nailthumb-figure square">
                                    <div class="nailthumb-container">
                                        <img class="nailthumb-image" src="images/twitter_gray.jpg" >
                                    </div>
                                </div>
                            </div>
                            <h3>SKYPE</h3>
                            <h4>CALL US</h4>
                            </a>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="slogan">
                FIND US
            </div>
            <div style="padding: 20px 0 100px 0;">
                
                <div style="max-width: 860px;margin: 0 auto">
                    <div class="map" style="position: relative">
                        <div style="position: relative;padding-bottom: 56%">
                            <div id="map" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="clear"></div>
            </div>
            
            

            <div class="foot">
                <div style="border-bottom: 1px solid #ccc;padding-top:40px;padding-bottom:40px">
                    <div class="col-md-4">
                        <h3>Contact Detail</h3>
                        
                        <p>
                            <span>+ P :</span>
                            0422 925 979
                        </p>
                        <p>
                            <span>+ E :</span>
                            admin@moodycrab.com
                        </p>
                    </div>
                    <div class="col-md-8">
                        <h3>Send Us A Message</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-contact">
                                    <div class="">
                                        <input type="text" class="form-control" placeholder="Enter your name here">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <img src="images/phone-ico.jpg"/>
                                        </span>
                                        <input type="text" class="form-control" placeholder="Phone">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <img src="images/mail-ico.jpg"/>
                                        </span>
                                        <input type="text" class="form-control" placeholder="Email">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-contact">
                                    <div class="">
                                        <textarea class="form-control" rows="3"></textarea>
                                    </div>
                                    <div class="" style="text-align: right;">
                                        <button type="button" class="btn btn-default">RESET</button>
                                        <button type="button" class="btn btn-danger">SUBMIT</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="copyright">
                    Coppyright &copy; MoodyCrab 2014
                </div>
            </div>	
        </div>
            <script type="text/javascript">
    var locations = [
        
      [
          'Muratti Cakes & Gateaux', 
          -34.8872049, 138.5939287, 
          17,
          '114B Prospect Rd, Prospect SA 5082',
          'This little hot spot in Prospect makes the best coffee and has an incredible selection of waist-busting cakes to have with that coffee'
      ],
      [
          'Tincat café', 
          -34.918767, 138.621058, 
          17,
          '107 Rundle st, Kent town SA 5067',
          'The best outside eating area that’s walking distance from the city.'
      ],
      [
          'Cibo Espresso', 
          -34.922383, 138.60773, 
          17,
          '218 Rundle st, Adelaide SA',
          'The coolest, friendliest and best looking coffee baristas in town.'
      ],
      [
          'Wheatsheaf Hotel', 
          -34.918963, 138.575584, 
          17,
          '39 George st Thebarton, SA 5031',
          'This unassuming pub is feverishly electric inside. Also has a great fireplace.'
      ],
      [
          'Clever Little Tailor', 
          -34.9236983, 138.5981351, 
          17,
          '19 Peel st Adelaide, SA 5000',
          'A great place to have a drink served by a knowledgeable bartender who’s keen to strut his stuff.'
      ],
      [
          'The Howling Owl', 
          -34.921582, 138.607586, 
          17,
          '11-13 Frome st Adelaide, SA 5000',
          'Decorated with a twist, a great place to concept, have a meeting or just watch the world walk past.'
      ],
      [
          'The Curious Squire', 
          -34.9092417,138.5972161, 
          17,
          '10 O’Connell st North Adelaide, SA 5006',
          'Beautiful layout and food and coffee to match. Or a cheeky wine or beer.'
      ],
      [
          'Amalfi Pizzeria', 
          -34.922221,138.607594, 
          17,
          '29 Frome st Adelaide, SA 5000',
          'Best pasta in town with atmosphere to match.'
      ],
      [
          'Raj on Taj', 
          -34.942614,138.607232, 
          17,
          '12/13-23 Unley rd, Parkside SA 5063',
          'A great place to have an amazing curry in a hurry.'
      ],
      [
          'Exeter Hotel', 
          -34.922317,138.608765,
          17,
          '246 Rundle st Adelaide 5000',
          'On a summers day, there is no better place to have a meeting over a cold Cooper’s ale.'
      ]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: new google.maps.LatLng(-34.91, 138.60),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        var icon ='http://starvn.vn/layout/moodycrab/images/marker-map-lv2.png';
        //if(i===0) icon ='http://starvn.vn/layout/moodycrab/images/marker-map.png';
        marker = new google.maps.Marker({
              title:locations[i][0],
              position: new google.maps.LatLng(locations[i][1], locations[i][2]),
              map: map,
              icon: icon
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            var content_info ='\
              <div style="max-width:320px">\
                  <div><h4 style="margin:0;padding:4px 0;color:#ee4034">'+locations[i][0]+'</h4></div>\
                  <div><b>Address :</b><i>'+locations[i][4]+'</i></div>\
                  <p>'+locations[i][5]+'</p>\
              </div>';
            return function() {
                infowindow.setContent(content_info);
                infowindow.open(map, marker);
            };
        })(marker, i));
    }
  </script>